// 逻辑代码
// 0. 获取元素
// 0-1. 分类列表 ul
const cateBox = document.querySelector('.cate')
// 0-2. 品牌列表
const propsBox = document.querySelector('.props')
// 0-3. 分页盒子
const pageBox = document.querySelector('.pagination')
// 0-4. 商品列表
const goodsBox = document.querySelector('.list')
// 0-5. 获取整体盒子
const box = document.querySelector('.container')

// 关于登录
const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')
const onBox = document.querySelector('.on')
const offBox = document.querySelector('.off')

// 登录
if (!id) {
    onBox.classList.remove('active')
    offBox.classList.add('active')
}
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)
xhr.onload = function () {
    const res = JSON.parse(xhr.responseText)
    if (res.code === 401) {
        onBox.classList.remove('active')
        offBox.classList.add('active')
    }
    if (res.code === 1) {
        onBox.firstElementChild.innerText = res.info.nickname
        offBox.classList.remove('active')
        onBox.classList.add('active')
    }
}

xhr.setRequestHeader('authorization', token)
xhr.send()

// 1. 准备一个参数的数据集合
const params = {
  q: '*',
  cate: '',
  props: '',
  sort: '',
  page: 0,
  callback: 'fn'
}

// 准备一个变量, 表示商品列表
let goodsList = []

// 功能函数, queryStringify()
function queryStringify(obj) {
  let str = ''

  for (let k in obj) {
    str += k + '=' + obj[k] + '&'
  }

  return str.slice(0, -1)
}

// 2. 请求数据的函数
getList()
function getList() {
  // jsonp 利用的是 script 标签的 src 属性
  // 前端提前准备好回调函数
  // 2-1. 创建一个 script 标签
  const script = document.createElement('script')
  // 2-2. 手动添加 src 属性
  script.src = `https://search.mall.360.cn/search/q?${ queryStringify(params) }`
  // 2-3. 把 script 标签插入到页面内
  document.body.appendChild(script)
  // 2-4. 把 script 标签删除
  script.remove()
}

// 3. 全局准备一个回调函数 fn, 用于渲染页面
function fn(res) {
  console.log(res)
  // 3-1. 渲染分类内容
  bindCateList(res.data.cates.subs)

  // 3-2. 渲染品牌数据
  res.data.options[0] && bindPropsList(res.data.options[0].subs)

  // 3-3. 渲染分页
  bindPagenation(res.total)

  // 3-4. 渲染商品列表
  bindGoodsList(res.data.list)
  goodsList = res.data.list
}

// 3-1. 渲染分类
function bindCateList(list) {
  let str = ''
  list.forEach(item => {
    str += `
      <li class="cate_item" data-value="${ item.value }">${ item.text }</li>
    `
  })
  cateBox.innerHTML = str
}

// 3-2. 渲染品牌
function bindPropsList(list) {
  let str = ''
  list.forEach(item => {
    str += `
      <li class="props_item" data-value="${ item.value }">${ item.text }</li>
    `
  })
  propsBox.innerHTML = str
}

// 3-3. 渲染分页
function bindPagenation(total) {
  const num = Math.ceil(total / 20)
  let str = `
    <span class="prevBtn">上一页</span>
    <ul>
  `

  for (let i = 0; i < num; i++) {
    str += `<li class="page_item" data-value="${ i }">${ i + 1 }</li>`
  }


  str += `
    </ul>
    <span class="nextBtn">下一页</span>
  `

  pageBox.innerHTML = str
}

// 3-4. 商品列表
function bindGoodsList(list) {
  console.log(list)
  let str = ''

  list.forEach(item => {
    str += `
      <li data-id="${ item.itemId }">
        <img src="${ item.img }" alt="">
        <p>${ item.title }</p>
        <span>
          ${ (item.price / 100).toFixed(2) }
        </span>
      </li>
    `
  })

  goodsBox.innerHTML = str
}

// 4. 各种点击事件
box.addEventListener('click',e => {
  const t = e.target

  // 4-1. 判断分类
  if (t.className === 'cate_item') {
    // 拿到标签身上的 value 赋值给 params.cate
    params.cate = t.dataset.value
    params.page = 0
    // 从新请求数据渲染页面
    getList()
  }

  // 4-2. 判断品牌
  if (t.className === 'props_item') {
    params.props = t.dataset.value
    params.page = 0
    getList()
  }

  // 4-3. 排序操作
  if (t.className === 'sort_item') {
    params.sort = t.dataset.value
    getList()
  }

  // 4-4. 搜索按钮
  if (t.nodeName === 'BUTTON') {
    // 拿到搜索框内的文本赋值给 cate
    params.q = t.previousElementSibling.value.trim()
    params.page = 0
    getList()
  }

  // 4-5. 切换到某一页
  if (t.className === 'page_item') {
    params.page = t.dataset.value
    getList()
  }

  // 判断点击的是下一页按钮
       if (t.className === 'nextBtn' && t.nodeName === 'SPAN') {
            params.page++
            getList()
        }
    
        // 判断点击的是上一页按钮
        if (t.className === 'prevBtn' && t.nodeName === 'SPAN') {
            params.page--
            getList()
        }
})

// 5. 点击加入购物车
// 注意: 因为是模拟, 所以我们用 localStorage 模拟
//      我们把需要加入到 购物车 内的数据, 添加到 localStorage 内
goodsBox.addEventListener('click', e => {
  if (e.target.nodeName !== 'LI') return

  // 需要拿到当前这件商品的信息
  // 5-1. 能拿到商品 id
  const goods_id = e.target.dataset.id
  // 5-2. 需要从商品列表数据内, 拿到 id 对应的商品信息
  // 注意: info 就是我们本次点击需要加入到 购物车 的数据信息
  const info = goodsList.find(item => item.itemId === goods_id)

  // 5-3. 拿到 localStorage 内的数组
  // 从 localStroage 内拿到一个购物车数组
  //   如果 localStorage 内有, 就直接使用, 如果没有, 就定义为一个空数组
  const cartList = JSON.parse(window.localStorage.getItem('cart')) || []

  // 5-3. 查看 cartList 内是否有 info 这一条数据了
  // 查看 cartList 内是否有 itemId === goods_id 的数据
  const repeatInfo = cartList.find(item => item.itemId === goods_id)

  // 5-4. 判断插入数据
  if (repeatInfo) {
    // 表示有重复数据
    repeatInfo.number++
  } else {
    // 表示没有重复数据
    info.number = 1
    info.is_select = false
    cartList.push(info)
  }

  // 5-5. 把修改过的 cartList 重新存储到 localStorage 内
  window.localStorage.setItem('cart', JSON.stringify(cartList))
})

// 跳转详情页
goodsBox.addEventListener('click', e => {
      // 判断点击的是li标签，跳转到详情页
      // 注意：让 li 内的标签都进行穿透效果
      if (e.target.nodeName === 'LI') {
          // console.log('跳转到详情页')
          // 拿到你点击的这个商品的id, 把id 存储在localStroage 内或者 sessionStroage 内
          // 渲染页面的时候, 把 该商品的 商品id 渲染在 标签身上
          // 每一个商品的id
          // console.log(e.target)
          const goodsId = e.target.dataset.id
          // 存在浏览器内
          window.sessionStorage.setItem('goodsId', goodsId)
          // console.log(goodsId)
  
          // 跳转到详情页
          window.location.href = './xiangqing.html'
      }
  })
